<template>
	<div class="app-container">
		<el-card class="box-card">
			<template #header>
				<div class="card-header">
					<span>投诉建议详情</span>
					<el-button @click="handleBack">返回</el-button>
				</div>
			</template>

			<el-descriptions :column="2" border>
				<el-descriptions-item label="标题">{{
					detail.title
				}}</el-descriptions-item>
				<el-descriptions-item label="投诉人">{{
					detail.user?.username
				}}</el-descriptions-item>
				<el-descriptions-item label="联系邮箱">{{
					detail.user?.email
				}}</el-descriptions-item>
				<el-descriptions-item label="提交时间">{{
					dayjs(detail.createdAt).format("YYYY-MM-DD HH:mm:ss")
				}}</el-descriptions-item>
				<el-descriptions-item label="状态">
					<el-tag :type="getStatusType(detail.status)">
						{{ detail.status === "Pending" ? "待处理" : "已处理" }}
					</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="内容" :span="2">
					<div class="content">{{ detail.description }}</div>
				</el-descriptions-item>
			</el-descriptions>

			<!-- 回复记录 -->
			<div
				v-if="detail.replies && detail.replies.length > 0"
				class="reply-section"
			>
				<h3>回复记录</h3>
				<el-timeline>
					<el-timeline-item
						v-for="reply in detail.replies"
						:key="reply.id"
						:timestamp="dayjs(reply.createdAt).format('YYYY-MM-DD HH:mm:ss')"
						:type="reply.isAdmin ? 'primary' : 'info'"
					>
						<div class="reply-content">
							<div class="reply-header">
								<span class="reply-author">{{
									reply.isAdmin ? "管理员" : detail.user?.username
								}}</span>
							</div>
							<div class="reply-text">{{ reply.content }}</div>
						</div>
					</el-timeline-item>
				</el-timeline>
			</div>

			<!-- 等待处理动画 -->
			<div
				v-if="detail.status === 'Pending' && userInfo.role !== 'Admin'"
				class="waiting-section"
			>
				<div class="waiting-content">
					<el-icon class="waiting-icon"><Loading /></el-icon>
					<div class="waiting-text">等待处理中...</div>
				</div>
			</div>

			<!-- 回复表单 -->
			<div
				v-if="detail.status === 'Pending' && userInfo.role === 'Admin'"
				class="reply-form"
			>
				<h3>回复</h3>
				<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
					<el-form-item label="回复内容" prop="reply">
						<el-input
							v-model="form.reply"
							type="textarea"
							:rows="4"
							placeholder="请输入回复内容"
						/>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleSubmit">提交回复</el-button>
					</el-form-item>
				</el-form>
			</div>

			<!-- 处理结果 -->
			<div v-if="detail.status === 'Processed'" class="process-result">
				<h3>处理结果</h3>
				<div class="result-content">
					<div class="result-header">
						<span class="result-time"
							>处理时间：{{
								dayjs(detail.processedAt).format("YYYY-MM-DD HH:mm:ss")
							}}</span
						>
					</div>
					<div class="result-text">{{ detail.response }}</div>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { Loading } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import { getComplaintDetail, replyComplaint } from "@/api/complaint";

const route = useRoute();
const router = useRouter();
const formRef = ref(null);

// 用户信息
const userInfo = ref({
	username: "",
	role: "",
});

// 获取用户信息
onMounted(() => {
	const userInfoStr = localStorage.getItem("userInfo");
	if (userInfoStr) {
		userInfo.value = JSON.parse(userInfoStr);
	}
});

// 详情数据
const detail = ref({});

// 表单数据
const form = reactive({
	reply: "",
});

// 表单验证规则
const rules = {
	reply: [{ required: true, message: "请输入回复内容", trigger: "blur" }],
};

// 获取详情
const getDetail = async () => {
	try {
		const res = await getComplaintDetail(route.params.id);
		detail.value = res;
	} catch (error) {
		console.error("获取投诉详情失败:", error);
	}
};

// 返回按钮
const handleBack = () => {
	router.push("/complaint/list");
};

// 表单提交
const handleSubmit = async () => {
	if (!formRef.value) return;
	await formRef.value.validate(async (valid) => {
		if (valid) {
			try {
				await replyComplaint(route.params.id, { reply: form.reply });
				ElMessage.success("回复成功");
				form.reply = "";
				getDetail();
			} catch (error) {
				console.error("回复失败:", error);
			}
		}
	});
};

// 获取状态标签类型
const getStatusType = (status) => {
	const statusMap = {
		Pending: "info",
		Processed: "success",
	};
	return statusMap[status] || "info";
};

onMounted(() => {
	getDetail();
});
</script>

<style scoped>
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.content {
	white-space: pre-wrap;
	line-height: 1.5;
}
.reply-section {
	margin-top: 30px;
}
.reply-form {
	margin-top: 30px;
}
.reply-content {
	background-color: #f5f7fa;
	padding: 10px;
	border-radius: 4px;
}
.reply-header {
	margin-bottom: 5px;
}
.reply-author {
	font-weight: bold;
	color: #409eff;
}
.reply-text {
	white-space: pre-wrap;
	line-height: 1.5;
}
.process-result {
	margin-top: 30px;
}
.result-content {
	background-color: #f5f7fa;
	padding: 15px;
	border-radius: 4px;
}
.result-header {
	margin-bottom: 10px;
}
.result-time {
	color: #909399;
	font-size: 14px;
}
.result-text {
	white-space: pre-wrap;
	line-height: 1.5;
}
.waiting-section {
	margin-top: 30px;
	padding: 40px;
	text-align: center;
}
.waiting-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.waiting-icon {
	font-size: 48px;
	color: #409eff;
	animation: rotate 2s linear infinite;
}
.waiting-text {
	font-size: 18px;
	color: #606266;
}
@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
</style>
